<template>
  <el-card shadow="never">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="160px" class="demo-ruleForm" status-icon>
      <!--      <el-row>-->
      <!--        <el-col :span="24">-->
      <!--          <el-form-item label="" prop="id">-->
      <!--            <el-input v-model="ruleForm.id"/>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <el-row>
        <el-col :span="24">
          <el-form-item label="标题" prop="helpTitle">
            <el-input v-model="ruleForm.helpTitle"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="内容" prop="helpContent">
            <!--            <el-input v-model="ruleForm.helpContent"/>-->
            <tinymce-index :value="ruleForm.helpContent" @update:value="updateContent"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
    </template>
  </el-card>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import type {FormInstance, FormRules} from 'element-plus'
import {ElMessage} from "element-plus";
import router from "@/router";
import {RetailHelp} from '@/apis/model/help/RetailHelpModel';
import {
  getXieyiRetailHelp,
  insertRetailHelp,
  insertXieyiRetailHelp,
  updateRetailHelp
} from '@/apis/http/help/RetailHelpHttp';
import TinymceIndex from "@/components/tinymce/TinymceIndex.vue";

const ruleForm = ref({} as RetailHelp);
const urlName = ref()
// 传递过来的参数
// const props = defineProps<Prop>();

// const emit = defineEmits(["closeEditDialog"]);

const refTinymce = ref();

// 关闭按钮
// const closeEditDialog = () => {
//   emit("closeEditDialog", {
//     addOrEditVisible: !props.addOrEditVisible,
//     refushList: refushList.value
//   })
// }
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()

const rules = reactive<FormRules>({
  id: [
    {required: true, message: '请输入', trigger: 'blur'}
  ],
  helpTitle: [
    {required: true, message: '请输入标题', trigger: 'blur'}
  ],
  helpContent: [
    {required: true, message: '请输入内容', trigger: 'blur'}
  ],
  statusFlag: [
    {required: true, message: '请输入状态 0-停用 1-启用 2-备用', trigger: 'blur'}
  ],
  delFlag: [
    {required: true, message: '请输入是否删除 0-否 1-是', trigger: 'blur'}
  ],
  createUser: [
    {required: true, message: '请输入创建人', trigger: 'blur'}
  ],
  createTime: [
    {required: true, message: '请输入创建时间', trigger: 'blur'}
  ],
  updateTime: [
    {required: true, message: '请输入修改时间', trigger: 'blur'}
  ],
  remark: [
    {required: true, message: '请输入备注', trigger: 'blur'}
  ],
})

const updateContent = (v: string) => {
  ruleForm.value.helpContent = v;
};

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return

  await formEl.validate((valid, fields) => {
    if (valid) {
      // 新增
      ruleForm.value.xieyiType = urlName.value;
      // if (props.addDataType === 'add') {
      insertXieyiRetailHelp(ruleForm.value).then(res => {
        const code = res.code;
        const message: string = res.message;
        const data = res.data;
        if (code == 200) {
          ElMessage({
            message: '创建成功！',
            type: 'success',
          })
        } else {
          ElMessage.error('创建失败！')
        }
      })
    } else {
      ElMessage.error('请完善信息！')
    }
  })
}

onMounted(() => {
  urlName.value = router.currentRoute.value.name;
  getXieyiRetailHelp(urlName.value).then(res => {
    ruleForm.value = res.data;
    ruleForm.value.xieyiType = urlName.value;
  })
})
</script>

<style scoped>
</style>
